<template>
	<view class="">
		<view class="f-30 pb">
			
				<view class="myVideo">
					<block v-if="!isImg && housDetail.video">
					<video class="myVideo" :src="housDetail.video" object-fit='cover' :poster="housDetail.img[0]?housDetail.img[0]:''"
					 x5-video-player-fullscreen="true" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
					 x5-playsinline>
					</video>
					</block>
					<block v-if="isImg">
						<view class="swiper">
							<swiper class="swiper" @change='changeSwiper' autoplay>
								<swiper-item v-for="(item,index) in housDetail.img" :key='this' class="swiperImg">
									<!-- <u-image  :src="item" @click="previewImage(index)">
										<u-loading slot="loading"></u-loading>
									</u-image> -->
									<img v-lazy="item" width='100%'   @click="previewImage(index)">
								</swiper-item>
								<swiper-item v-if='housDetail.img.length == 0'>
									<u-image class="swiperImg" src="" v-if='housDetail.img.length == 0'>
										<view slot="error" style="font-size: 24rpx;">暂无图片</view>
									</u-image>
								</swiper-item>
							</swiper>
							<view class="swiper_dot" v-if="housDetail.img.length">
								{{currIndex}}/{{housDetail.img.length}}
							</view>
						</view>
					</block>
				</view>
				
			
			
			<view class="dis-flex flex-x-center flex-y-center tag">
				<view v-if="housDetail.video" class="card f-28" :class="isImg?'':'active'" @click="choiceType(false)">视频</view>
				<view class="card f-28" :class="isImg?'active':''" @click="choiceType(true)">图片</view>
			</view>
			<view class="bb content">
				<view class="f-40 dis-flex mt-20">
					<view class="flex-box title-bold">
						{{housDetail.title}}·{{housDetail.layout}}
					</view>
				</view>
				<!-- <view class="col-m price" v-if="housDetail.price">
					<text class="f-42">{{housDetail.price}}</text>
					<text>元/月</text>
				</view> -->
				<view class="dis-flex flex-wrap mt-20">
					<view class="u-n-tag" v-for="item in housDetail.characteristic">
						{{item}}
					</view>
				</view>
				<view class="mt-20">
					<text class="title-bold">房间号：</text>
					<text>{{housDetail.housingCode}}</text>
				</view>
				<!-- <view class="mt-20">
					<text class="title-bold">地址信息：</text>
					<text>{{housDetail.address}}</text>
				</view> -->
			</view>
			<view class="bb content dis-flex flex-wrap bb">
				<view class="dis-flex flex-dir-column flex-x-center flex-y-center mr-60">
					<text class="f-38 title-bold">装修</text>
					<text class="f-30">{{housDetail.renovation}}</text>
				</view>
				<view v-if="housDetail.orientation" class="dis-flex flex-dir-column flex-x-center flex-y-center mr-60">
					<text class="f-38 title-bold">朝向</text>
					<text class="f-30">{{housDetail.orientation}}</text>
				</view>
				<view v-if="housDetail.area" class="dis-flex flex-dir-column flex-x-center flex-y-center mr-60">
					<text class="f-38 title-bold">面积</text>
					<text class="f-30">{{housDetail.area}}m²</text>
				</view>
				<view class="dis-flex flex-dir-column flex-x-center flex-y-center">
					<text class="f-38 title-bold">入住时间</text>
					<text class="f-30">{{housDetail.checkInTime || '随时入住'}}</text>
				</view>
			</view>
			<view class=" content" v-if="housDetail.deposit ||  housDetail.manageFee || housDetail.waterRate||housDetail.powerRate
			||housDetail.networkCharges||housDetail.sanitationFee||housDetail.sharingFee || housDetail.otherFee">
				<view class="f-40 title-bold">费用信息</view>
				<view class="dis-flex flex-wrap">
					<view class="dis-flex flex-dir-column flex-x-center  flex-y-center Facilities" v-if="housDetail.deposit">
						<text class="f-32 title-bold">押金</text>
						<text class="f-30">{{housDetail.deposit}}</text>
					</view>
					<view class="dis-flex flex-dir-column flex-x-center  flex-y-center Facilities" v-if="housDetail.manageFee">
						<text class="f-32 title-bold">管理费</text>
						<text class="f-30">{{housDetail.manageFee}}</text>
					</view>
					<view class="dis-flex flex-dir-column flex-x-center  flex-y-center Facilities" v-if="housDetail.waterRate">
						<text class="f-32 title-bold">水费</text>
						<text class="f-30 ">{{housDetail.waterRate}}/吨</text>
					</view>
					<view class="dis-flex flex-dir-column flex-x-center  flex-y-center Facilities" v-if="housDetail.powerRate">
						<text class="f-32 title-bold">电费</text>
						<text class="f-30">{{housDetail.powerRate}}/度</text>
					</view>
					<view class="dis-flex flex-dir-column flex-x-center  flex-y-center Facilities" v-if="housDetail.networkCharges">
						<text class="f-32 title-bold">网费</text>
						<text class="f-30">{{housDetail.networkCharges}}</text>
					</view>
					<view class="dis-flex flex-dir-column flex-x-center  flex-y-center Facilities" v-if="housDetail.sanitationFee">
						<text class="f-32 title-bold">卫生费</text>
						<text class="f-30">{{housDetail.sanitationFee}}</text>
					</view>
					<view class="dis-flex flex-dir-column flex-x-center  flex-y-center Facilities" v-if="housDetail.sharingFee">
						<text class="f-32 title-bold">公摊费</text>
						<text class="f-30">{{housDetail.sharingFee}}</text>
					</view>
					<view class="dis-flex flex-dir-column flex-x-center  flex-y-center Facilities" v-if="housDetail.otherFee">
						<text class="f-32 title-bold">其他杂费</text>
						<text class="f-30">{{housDetail.otherFee}}</text>
					</view>
				</view>
			</view>
			<view class=" content" v-if="housDetail.housingFacilities">
				<view class="f-40 title-bold">配套设施</view>
				<view class="dis-flex flex-wrap">
					<view class="dis-flex flex-dir-column flex-x-center  flex-y-center Facilities" v-for="item in housDetail.housingFacilities"
					 v-if="item" :key='this'>

						<image src="../../static/facilities/heater.png" mode="widthFix" class="washingImg" v-if="item.facilitiesId == 1"></image>
						<image src="../../static/facilities/Refrigerator.png" mode="widthFix" class="washingImg" v-if="item.facilitiesId ==  2"></image>
						<image src="../../static/facilities/AirConditioner.png" mode="widthFix" class="washingImg" v-if="item.facilitiesId ==  3"></image>
						<image src="../../static/facilities/Washing.png" mode="widthFix" class="washingImg" v-if="item.facilitiesId == 4"></image>
						<image src="../../static/facilities/WIFI.png" mode="widthFix" class="washingImg" v-if="item.facilitiesId == 5"></image>
						<image src="../../static/facilities/balcony.png" mode="widthFix" class="washingImg" v-if="item.facilitiesId == 6"></image>
						<image src="../../static/facilities/TOILET.png" mode="widthFix" class="washingImg" v-if="item.facilitiesId == 7"></image>
						<image src="../../static/facilities/wardrobe.png" mode="widthFix" class="washingImg" v-if="item.facilitiesId == 8"></image>
						<image src="../../static/facilities/Bed.png" mode="widthFix" class="washingImg" v-if="item.facilitiesId == 9"></image>
						<image src="../../static/facilities/desksAndChairs.png" mode="widthFix" class="washingImg" v-if="item.facilitiesId == 10"></image>
						<image src="../../static/facilities/sofa.png" mode="widthFix" class="washingImg" v-if="item.facilitiesId == 11"></image>
						<image src="../../static/facilities/teaTable.png" mode="widthFix" class="washingImg" v-if="item.facilitiesId == 12"></image>
						<image src="../../static/facilities/lampblack.png" mode="widthFix" class="washingImg" v-if="item.facilitiesId == 13"></image>
						<text>{{item.facilitiesName}}</text>
					</view>
				</view>
			</view>
				<!-- 消息提示 -->
				<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				currIndex: 1,
				isImg: false,
				housDetail: {
					img: []
				},
				housingId: '',

			}
		},
		onLoad(options) {
			this.housingId = options.id;
		},
		onShow() {
			this.getHousDetail(this.housingId);
		},
		methods: {
			// 轮播改变
			changeSwiper(e) {
				this.currIndex = e.target.current + 1;
			},
			// 预览图片
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.housDetail.img,
				});
			},
			// 选择类型
			choiceType(flag) {
				this.isImg = flag;
			},
			
			// 获取房源详情
			getHousDetail(id) {
				this.$u.api.share(id).then(res => {
					let img = [],
						video = '';
					res.data.characteristic = res.data.characteristic ? res.data.characteristic.split(",") : [];
					if (res.data.files) {
						res.data.files.forEach(element => {
							if (element.fileType == 0) {
								img.push(element.url)
							} else {
								video = element.url;
							}
						})
					}

					let time = res.data.checkInTime ? res.data.checkInTime.split("T") : '';
					res.data.checkInTime = time[0];

					res.data.img = img;
					res.data.video = video;
					this.isImg = video ? false : true
					this.housDetail = res.data;
				})
			},
		}

	}
</script>

<style scoped>
	.title-bold {
		font-weight: bold;
	}

	.card {
		padding: 5rpx 25rpx;
		border: none;
		text-align: center;
		border-radius: 20rpx;
		margin-left: 40rpx;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		background-color: #5E5E5E;
		color: #fefefe;
		opacity: 0.5
	}

	.price {
		color: #d76150;
		font-weight: bold;
	}

	.myVideo {
		width: 100%;
		height: 450rpx;
	}

	.swiperImg {
		width: 100% !important;
		height: 450rpx !important;
	}

	.swiper {
		position: relative;
		height: 450rpx;
	}

	.swiper_dot {
		position: absolute;
		bottom: 14rpx;
		right: 20rpx;
		padding: 6rpx 16rpx;
		line-height: 1;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 100rpx;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.active {
		background-color: #4171f9;
		color: #fefeff;
		opacity: 1;
	}

	.washingImg {
		width: 64rpx;
		margin-bottom: 10rpx;
	}

	.dot {
		display: inline-block;
		width: 10rpx;
		height: 10rpx;
		background: black;
		border-radius: 50%;
		margin: 0 10rpx;
		box-sizing: border-box;

	}

	.pb {
		padding-bottom: 140rpx;
	}

	.u-n-tag {
		background-color: #f3f4f9;
		font-size: 28rpx;
		color: #8994b8;
		padding: 5rpx 10rpx;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
		border-radius: 10rpx;
	}

	.content {
		padding: 24rpx 30rpx;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.bottomCard {
		position: fixed;
		bottom: 0;
		border-top: 1rpx solid #cacaca;
		width: 100%;
		background: white;
		z-index: 1000;
		padding: 24rpx 30rpx;
	}

	.phone {
		margin-right: 40rpx;
	}

	.Facilities {
		flex: 0 0 25%;
		margin-top: 40rpx;
	}

	.mr-60 {
		margin-right: 60rpx;
	}

	.tag {
		position: absolute;
		top: 430rpx;
		left: 0;
		right: 0;
		z-index: 100;
	}
</style>
